<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .component {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #dcdcdc;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .component:hover {
            background-color: #c7c7c7;
        }
        .dragabble {
             width: 150px;
             height: 30px;
             background-color: #9cff28;
             color: #282533;
             text-align: center;
             cursor: move;
         }

    </style>
</head>
<body>
<div class="container" id="parent-div">
    <div id="big-bang" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">big-bang</div>
    <br>
    <div id="T3" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">T3</div>
    <br>
    <div id="img-card" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">img-card</div>
    <br>
    <div id="pmd-marquee" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">pmd-marquee</div>
    <br>
    <div id="chart-component" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">chart-component</div>
<!--    <br>-->
<!--    <div id="echart-exam" class="dragabble" draggable="true" style="display: flex;justify-content: center;align-items: center;"><img src="./img/down.png" style="width: 15px;height: 15px;">echart-exam</div>-->
</div>
</body>
<script>
    function handleClick(event) {
        localStorage.setItem('draggedContent', event.target.id);
    }
    function bindEventToChildren(parentId, eventType, eventHandler) {
        const parentElement = document.getElementById(parentId);
        if (!parentElement) return;

        // 获取父元素的所有子元素
        const children = parentElement.children;

        // 为每个子元素绑定事件监听器
        for (let i = 0; i < children.length; i++) {
            children[i].addEventListener(eventType, eventHandler);
        }
    }
    // 绑定点击事件到父元素的所有子元素
    bindEventToChildren('parent-div', 'dragstart', handleClick);

//    const big_bang = document.getElementById('big-bang');
//    // 开始拖拽事件
//    big_bang.addEventListener('dragstart', (event) => {
//        localStorage.setItem('draggedContent', 'big-bang');
//    });
//
//    const T3 = document.getElementById('T3');
//    // 开始拖拽事件
//    T3.addEventListener('dragstart', (event) => {
//        localStorage.setItem('draggedContent', 'T3');
//    });
//
//    const img_card = document.getElementById('img-card');
//    // 开始拖拽事件
//    img_card.addEventListener('dragstart', (event) => {
//        localStorage.setItem('draggedContent', 'img-card');
//    });
//
//    const pmd_marquee = document.getElementById('pmd-marquee');
//    // 开始拖拽事件
//    pmd_marquee.addEventListener('dragstart', (event) => {
//        localStorage.setItem('draggedContent', 'pmd-marquee');
//    });
</script>
</html>